
<script setup lang="ts">
import Monitor from '../components/Monitor.vue';
import Keyboard from '../components/Keyboard.vue';
import Desk from '@/components/Desk.vue';
import Mouse from '@/components/Mouse.vue';
import MouseMat from '@/components/MouseMat.vue';
import System from '@/components/System.vue';
import {  onMounted, ref } from 'vue';
import NotebookTable from '@/components/NotebookTable.vue';
import Notebook from '@/components/Notebook.vue';
import Cup from '@/components/Cup.vue';
import ElectricFan from '@/components/ElectricFan.vue';
import Phone from '@/components/Phone.vue';
import PhoneTable from '@/components/PhoneTable.vue';
import MonitorTable from '@/components/MonitorTable.vue';
import Spliter from '@/components/Spliter.vue';
import Bookshelf from '@/components/Bookshelf.vue';
import Cabinet from '@/components/Cabinet.vue';
import Thermometer from '@/components/Thermometer.vue';
import PowerStrip from '@/components/PowerStrip.vue';

// 定义组件配置项的接口
interface ComponentConfig {
  key: string;
  visible: boolean;
  name: string;
  content?: any; // 组件内容
  props?: Record<string, any>; // 组件属性
  events?: Record<string, string>; // 组件事件
  style?: Record<string, string>; // CSS样式，改为可选
}

const system = ref({} as object);
const fullScreen = ref(false);
function keyChange(keys: number[]) {
  console.log(keys);
}

onMounted(() => {
  // system.value = h(System, {fontSize: '0.5rem'});
  // system.value = System
  
  window.addEventListener('keydown', (e) => {
    console.log(e.key);
    if (e.key === 'Escape') {
      fullScreen.value = !fullScreen.value;
    }      
  })
});
const fontSizeGlobal = ref(0);

    function handleResize() {
            
		// 设置根元素的字体大小
      const fontSize=window.innerWidth / 100;
		fontSizeGlobal.value=fontSize;
		document.documentElement.style.setProperty('font-size', fontSize+'px');

		}
    
		window.onresize = handleResize;
		handleResize();

        
    function handleSwitches(key:string) {
      // debugger
      const comp =componentsConfig.value.filter(itm=>itm.key===key)[0];
      comp.visible = !comp.visible;
      if(key === 'all') {
        for(const c of componentsConfig.value) {
          c.visible = comp.visible;
        }
      }
      
    }

    // 组件配置数组
const componentsConfig = ref<ComponentConfig[]>([ 
  {
    key: 'all',
    visible: true,
    name: '全部'
  },
  {
    key: 'spliter',
    visible: true,
    name: '分割板',
    content: Spliter,
    style: {
      position: 'absolute',
      top: '8em',
      left: '15em'
    }
  },
  {
    key: 'cabinet',
    visible: true,
    name: '柜子',
    content: Cabinet,
    style: {
      position: 'absolute',
      top: '42em',
      left: '30em'
    }
  },
  {
    key: 'desk',
    visible: true,
    name: '桌子',
    content: Desk,
    style: {
      position: 'absolute',
      top: '2em',
      left: '10em'
    }
  },
  {
    key: 'bookshelf',
    visible: true,
    name: '书架',
    content: Bookshelf,
    style: {
      position: 'absolute',
      top: '6em',
      left: '-10em',
      scale: '0.55' // 注意：scale是CSS transform的属性，这里为了简洁暂直接写，实际推荐用transform
    }
  },
  {
    key: 'notebookTable',
    visible: true,
    name: '笔记本支架',
    content: NotebookTable,
    style: {
      position: 'absolute',
      left: '3em',
      top: '23em',
      scale: '1.4'
    }
  },
  {
    key: 'notebook',
    visible: true,
    name: '笔记本',
    content: Notebook,
    props: {
      'system-content': System,
      'system-props': { fontSize: '0.5rem' },
    },
    style: {
      position: 'absolute',
      top: '9em',
      left: '3em',
      scale: '0.7',
      transform: 'rotateZ(348deg)'
    }
  },
  {
    key: 'phoneTable',
    visible: true,
    name: '手机支架',
    content: PhoneTable,
    style: {
      position: 'absolute',
      left: '16em',
      top: '30em',
      scale: '0.66'
    }
  },
  {
    key: 'phone',
    visible: true,
    name: '手机',
    content: Phone,
    props: {
      isPower: false,
      bgColor: '#333'
    },
    style: {
      position: 'absolute',
      left: '16em',
      top: '23.5em',
      scale: '0.5',
      transform: 'rotate(336deg) rotateY(56deg)'
    }
  },
  {
    key: 'powerStrip',
    visible: true,
    name: '插排',
    content: PowerStrip,
    style: {
      position: 'absolute',
      top:'2em',
      left: '34em',
      scale: '0.40',
      // transform: 'rotateX(334deg) rotateY(348deg) rotateZ(354deg)'
    }
  },
  {
    key: 'cup',
    visible: true,
    name: '杯子',
    content: Cup,
    style: {
      position: 'absolute',
      top: '25em',
      left: '75em',
      scale: '0.8'
    }
  },
  {
    key: 'monitorTable',
    visible: true,
    name: '显示器桌',
    content: MonitorTable,
    style: {
      position: 'absolute',
      top: '28em',
      left: '37em',
      scale: '0.8'
    }
  },
  {
    key: 'monitor',
    visible: true,
    name: '显示器',
    content: Monitor,
    props: {
      'system-content': System,
      'system-props': { fontSize: '0.5rem' },
    },
    style: {
      position: 'absolute',
      top: '2em',
      left: '42em',
    }
  },
  {
    key: 'thermometer',
    visible: true,
    name: '温度计',
    content: Thermometer,
    style: {
      position: 'absolute',
      top:'21em',
      left: '64em',
      scale: '0.30',
      // transform: 'rotateX(334deg) rotateY(348deg) rotateZ(354deg)'
    }
  },
  {
    key: 'fan',
    visible: true,
    name: '电风扇',
    content: ElectricFan,
    style: {
      position: 'absolute',
      left: '76em',
      top: '15em',
      scale: '0.8'
    }
  },
  {
    key: 'keyboard',
    visible: true,
    name: '键盘',
    content: Keyboard,
    props: {
      full: true
    },
    events: {
      change: 'keyChange'
    },
    style: {
      position: 'absolute',
      left: '11em',
      top: '24em',
      transform: 'rotateX(55deg)',
      scale: '0.5'
    }
  },
  {
    key: 'mouseMat',
    visible: true,
    name: '鼠标垫',
    content: MouseMat,
    style: {
      position: 'absolute',
      left: '62em',
      top: '27em',
      scale: '0.7',
      transform: 'rotateX(59deg) rotate3d(1, 0, 0, 351deg)'
    }
  },
  {
    key: 'mouse',
    visible: true,
    name: '鼠标',
    content: Mouse,
    style: {
      position: 'absolute',
      left: '77em',
      top: '32em',
      scale: '0.4',
      transform: 'rotateX(32deg)'
    }
  }
]);
</script>
<template>
  <div class="ws" oncontextmenu="return false">
   
    <template  v-if="!fullScreen">
        
        <div class="selector">
          <template v-for="({visible,key,name}) in componentsConfig" :key="key" >
            <div :class="`selector-item ${visible ? 'active' : ''}`" @click="handleSwitches(key)"><span></span>{{name  }}</div>
          </template>
        </div>
        <!-- <div v-if="switches.spliter.value" style="position: absolute;top:2em:left:16em;">
          <Spliter/>
        </div>
        
        <div v-if="switches.cabinet.value" style="position:absolute ;top:10em;left:10em;">
            <Cabinet/>
          </div>
        <div  v-if="switches.desk.value" style="position: absolute;top:1em;left:0em;">
          <Desk/>
        </div>
        
        <div v-if="switches.bookshelf.value" style="position: absolute;top :-1em;left:1em;scale: 0.4;">;">
          <Bookshelf/>
        </div>
        <div v-if="switches.notebook.value" style="position: absolute;top :0em;left: 6em;scale: 0.5;transform: rotateZ(-10deg);">
          <notebook v-if="system" :system-content="system"></notebook>                      
        </div>
          <div  v-if="switches.phoneTable.value" style="position: absolute;left:19em;top:17em; scale: 0.56;">
            <PhoneTable/>
          </div>
          <div  v-if="switches.phone.value" style="position: absolute;left: 20em;top: 12.3em;scale: 0.4;transform: rotate3d(1, 0, 0, 58deg) rotate3d(0, 1, 0, 32deg) rotate3d(0, 0, 1, 315deg);">
            <phone :isPower="false" bgColor="#333"/>
          </div>
        
          <div v-if="switches.monitorTable.value" style="position:absolute;top:19em;scale: 0.8;">
            <MonitorTable/>
          </div>
          <div v-if="switches.monitor.value"  style="position:absolute;top:-9em">
            <Monitor v-if="system" :system-content="system"></Monitor>
          </div>
          
          <div v-if="switches.cup.value" style="position:absolute;left:67em;top:13em;scale: 0.8;">
            <cup />
          </div>
          <div v-if="switches.fan.value" style="position:absolute;left:76em;top:5em;scale: 0.8;">
            <electricFan />
          </div>
  
          <div v-if="switches.keyboard.value"  style="position:absolute;left: 11em;top: 4em;transform: rotateX(65deg);scale: 0.5;">
          <Keyboard   @change="keyChange" :full="true"/>
          </div>
          
          <div v-if="switches.fan.value" style="position:absolute;left:76em;top:5em;scale: 0.8;">            
            <Mouse/>
          </div>       
          
        <div v-if="switches.thermometer.value" style="position: absolute;left: 55em;scale: 0.4; transform: rotateX(336deg) rotateY(358deg);">
            <Thermometer v-if="system" :system-content="system"></Thermometer>                      
          </div>
         -->
          <!-- 遍历数组渲染所有组件 -->
        <template v-for="item in componentsConfig" :key="item.key">
          <div v-if="item.content" :style="item.style">
            <component
              v-if="item.visible"
              :is="item.content"
              v-bind="item.props"
              v-on="item.events"
              
            ></component>
          </div>
        </template>
    </template>
    <template v-else>
      <System fontSize="1.5rem"></System>
    </template>
    <!-- <Bookshelf></Bookshelf> -->
    <!-- <Book></Book> -->
    
    
  </div>
</template>

<style>
/* @media (min-width: 1024px) { */
  .ws {
    
			user-select: none;
    width: 100em;
    height: 80em;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* background: black; */
    /* transform-style: preserve-3d; */
		perspective:110em;
    position: relative;
    font-size: 1rem;    
    
    /* transform: rotate3d(1, 0, 0, 60deg); */
  }
/* } */
.ws .selector {
  position: absolute;
  /* bottom: 1em; */
  left: 1em;
  top:1em;
  /* width: 100%; */
  height: 1em;
  display: flex;
  flex-direction: column;
  /* justify-content: center; */
  /* align-items: center; */
  z-index: 999;
  font-size: 1rem;
  background-color: white;
  padding: 1em;
  gap:1em;
}
.ws .selector-item {
  display: flex;
  flex-direction: row;
  line-height: 1em;
  margin: 0 0.2em;
  font-size: 1rem;
  cursor: pointer;
  user-select: none;
  transition: all 0.3s;
}
.ws .selector-item:hover {
  transform: scale(1.1);
  font-size: 1.1rem;
}
.ws .selector-item span {
  width: 1em;
  height: 1em;
  background-color: #333;
}
.ws .active span {
  background-color: #02f40a;
}
</style>
